---

12. RAD Designs and Layouts

This chapter helps you understand the major features of CodeWarrior's rapid application development (RAD) tools. You can also learn about the motivations for RAD development, as well as the concepts of designs and layouts in CodeWarrior projects.

The sections in this chapter are:

• About RAD
• CodeWarrior RAD Tools
• Creating RAD Projects
• RAD Wizards
• Working with Designs
• Working with Layouts

Traditional application programming requires tedious and manual work. When you create a new application, you are responsible for coding every aspect of the program. You must specify all initialization routines, the interactions between the various pieces of the program, and the user interface.

RAD tools automate some of these manual processes, so you can concentrate your efforts on the application itself. The tools automatically generate code that handles generic initialization routines and the drawing of user interface elements on the screen. In addition, you can modify the generated code to suit your application's specific needs.

CodeWarrior includes RAD tools as part of the development environment. These tools support the development of applications, applets, and components through a plug-in architecture. You can use existing RAD plug-ins with the IDE, or you can create your own. This flexibility supports multiple languages, platforms, and application frameworks.

CodeWarrior RAD tools let you visually construct an application. The tools included with the IDE are for use with Java. They extend the graphical capabilities of the IDE for use with RAD. Additional programming frameworks will be supported in the future.

This section discusses the following topics:

• Class Authoring
• Component Model

RAD tools let you create and modify classes through a high-level visual interface. You can use this interface to create, rename, and delete the various classes, member functions, and data members in your application. The RAD tools automatically synchronize declarations and definitions as you modify the application.

Because CodeWarrior uses a plug-in architecture for RAD, you can easily extend the IDE's capabilities. The RAD tools automatically generate source code via scripts. You can modify existing scripts to customize the generated code for your application.

CodeWarrior RAD tools use a component model to create applications. A component in RAD context is a self-describing object. The component represents an object in the programming framework you use to create an application. All of the properties, methods, and events that describe an object are included in the component.

Components enable a powerful and intuitive user interface for applications across a wide variety of platforms. RAD tools use these components to provide several services, including persistence and automation.

CodeWarrior uses these tools to implement the component model:

• Layout Editor
• Catalogs

One major part of the RAD tools is the Layout editor. This application builder uses a visual development environment. User interface elements are visually represented as components. You can drag and drop components to form your application. As you make changes, the IDE updates the Layout editor display and modifies the generated source code accordingly.

Catalogs comprise the second major part of the RAD tools. Catalogs are repositories of available components for the application. The IDE provides catalogs based on the programming framework you use. For example, when you create a Java application, you can choose components from Java-specific catalogs. The properties and events of the components in a catalog are fully customizable.

To create a CodeWarrior RAD project, choose New from the File menu. The IDE displays the New window, as shown in Figure 12.1.

Click the Project tab at the top of the window to display the Project panel. This panel shows the available stationery and wizards that you can use to create new CodeWarrior projects. When you select an item in the list, various options become available along the right side of the Project panel.

To create a new RAD project, select one of the following wizards in the project list:

• Java Applet Wizard-helps you create a Java applet. The wizard asks for information about the applet's class, HTML page, parameters, and description.
• Java Application Wizard-helps you create a Java application. The wizard asks for information about the application's class, frame class, and description.
• Java Bean Wizard-helps you create a Java bean. The wizard asks you for information about the bean's class, location, package, and modifiers.

The Location field displays the full path to the folder in which the project is saved. To change the current path, type a new path directly into the field. Alternatively, click the Set button to the right of the field to display a dialog box, which is shown in Figure 12.2 (Windows) and Figure 12.3 (Mac OS). Use the dialog box controls to navigate to a location on your hard disk where you want to save the project. To create a new folder to contain the project file and all of its associated files, make sure the Create Folder checkbox is enabled. Then click Save to confirm the location and return to the New window.

When you finish typing a name for the RAD project and choosing a location in which to save that project, click OK in the New window. The IDE opens the wizard you selected in the Project panel. The selected wizard guides you through the remaining steps of the project-creation process. For detailed information about each wizard, see "RAD Wizards" on page 498.

When creating a new RAD project or design, as described in "Creating RAD Projects" on page 495 and "Adding Designs to a Project" on page 513, you select a RAD wizard. The wizard helps you complete the item-creation process. This section describes the following RAD wizards:

• Java Applet Wizard
• Java Application Wizard
• Java Bean Wizard

The RAD wizards include the following navigation buttons:

• Back-return to the previous step
• Next-proceed to the subsequent step
• Finish-display a summary of current information
• Cancel-discard all changes

You can modify the default settings in each step. To accept all current settings in the wizard, click Finish. The wizard displays a summary of all the current settings for the new project. Click Generate to accept the current settings and create the new RAD item, or click Cancel to return to the wizard and continue modifying settings.

The Java Applet wizard is divided into the following steps:

1. Describe the applet class for the Java applet.

2. Specify an HTML page for the Java applet. (optional)

3. Create parameters for the Java applet.

4. Provide additional information for the Java applet.

To use the Java Applet wizard, follow these steps:

1. Describe the applet class for the Java applet.

This section of the wizard, shown in Figure 12.4, lets you specify the class name, package name, and location for the new applet. Other options are available to further describe the applet.

This section includes the following parts:

• Class Name
• Package Name
• Location
• Can run as a standalone application
• Generate standard methods
• Generate HTML Page
• AWT applet
• Swing applet

Enter a name for the applet's class in this field. An example name is provided.

If you wish, you can enter in this field a package for the applet class. A sample package name is provided.

In this field, type a location in which to save the applet class for the new applet. Alternatively, click the button next to the field. A standard window displays. Use the window controls to select a location. Note that a valid location depends on your settings for strict filenames and strict package roots.

Enable this checkbox if you want the new applet to operate without needing to be called from another application. Disable this checkbox otherwise.

Enable this checkbox if you want the new applet to generate standard methods for its interface, such as show() and dispose(). Disable this checkbox otherwise.

Enable this checkbox if you want to create an HTML page to help you test the new applet. Disable this checkbox otherwise. Note that the Java Applet wizard displays the HTML Page section only when you enable the Generate HTML Page checkbox. This checkbox is enabled by default.

Click this radio button to designate the new applet as an AWT applet. This radio button is enabled by default.

Click this radio button to designate the new applet as a Swing applet.

2. Specify an HTML page for the Java applet. (optional)

This section of the wizard, shown in Figure 12.5, is displayed only when you enable the Generate HTML Page checkbox from the previous section. The HTML Page section lets you define a Hypertext Markup Language (HTML) page to test the new applet.

This section includes the following parts:

• Title
• Applet Name
• Codebase/Archive
• Use Archive (JAR)
• Width
• Height
• HSpace
• VSpace
• Align

Enter in this field a title for the HTML page you wish to generate. An example title is provided.

Your HTML browser displays messages about the applet by using the name you type in this field. A sample applet name is shown.

If desired, use this field to specify a codebase or archive for use with the new applet. An example is shown.

Enable this checkbox if you want to use a Java archive (JAR) with the new applet. If this checkbox is enabled, a ".jar" extension is appended to the name in the Codebase/Archive field.

The number you type in this field represents the number of pixels that span the width of the applet within the HTML page.

The number typed in this field specifies the number of pixels that span the height of the applet within the HTML page.

The number in this field defines the number of pixels placed on the left side and on the right side of the applet within the HTML page.

The number in this field defines the number of pixels placed above and below the applet within the HTML page.

Use this pop-up menu to determine the alignment of the applet within the HTML page:

• absbottom-position at the absolute bottom of the page
• absmiddle-position at the absolute middle of the page
• baseline-position at the baseline of the page
• bottom-position at the bottom of the page
• left-position at the left side of the page
• middle-position at the middle of the page. This is the default option.
• right-position at the right side of the page
• texttop-position at the top of the text on the page
• top-position at the top of the page

3. Create parameters for the Java applet.

A sample <New> parameter is ready for you to modify. To change a particular field, double-click it. Type a new value in the field and press Enter/Return to confirm your changes.

If you double-click the Type field, choose a new value from the pop-up menu that displays inside the field. Alternatively, if you know which data type you would like to choose beforehand, you can use a shortcut. Simply double-click the Type field and type the first letter of your desired data type. The field displays a new value. If an incorrect value displays, type the same letter again to choose the next closest match. For example, if you double-click the field and type the letter s, the field changes to String. Typing the letter s again changes the field to short.

To add another parameter to the applet, click Add. The wizard creates a new parameter for you to modify. To remove a particular parameter, select one of its fields and click Remove.

4. Provide additional information for the Java applet.

This section of the wizard, shown in Figure 12.7, lets you provide additional information to describe the applet.

This section includes the following parts:

• Applet title
• Description
• Insert information in every file

If desired, enter a title for the new applet in this field.

If you wish, type a description for the new applet in this field.

To add the information contained in the Applet title and Description fields to the beginning of every applet file, enable this checkbox. Disable the checkbox otherwise. The checkbox is enabled by default.

The Java Application wizard is divided into the following steps:

1. Describe the application class for the Java application.

2. Describe the frame class for the Java application.

3. Provide additional information for the Java application.

To use the Java Application wizard, follow these steps:

1. Describe the application class for the Java application.

This section of the wizard, shown in Figure 12.8, lets you specify application class information for the Java application.

This section includes the following parts:

• Class Name
• Package Name
• Location
• Create a frame on startup

Enter a name for the application's class in this field. An example name is provided.

If you wish, you can enter in this field a package for the application class. A sample package name is provided.

In this field, type a location in which to save the application class for the new application. Alternatively, click the button next to the field. A standard window displays. Use the window controls to select a location.

Enable this checkbox if you want the IDE to automatically generate a new layout frame. This option automatically displays the Layout Editor, Component Palette, and Object Inspector. Disable the checkbox if you do not want to automatically display these tools.

2. Describe the frame class for the Java application.

This section of the wizard, shown in Figure 12.9, lets you specify frame class information for the Java application.

This section includes the following parts:

• Class Name
• Package Name
• Location
• AWT frame
• Swing frame

Enter a name for the frame's class in this field. An example name is provided.

If you wish, you can enter in this field a package for the frame class. A sample package name is provided.

In this field, type a location in which to save the frame class for the new application. Alternatively, click the button next to the field. A standard window displays. Use the window controls to select a location. Note that a valid location depends on your settings for strict filenames and strict package roots.

Click this radio button to designate the new application as an AWT frame. This radio button enabled by default.

Click this radio button to designate the new application as a Swing frame.

3. Provide additional information for the Java application.

This section of the wizard, shown in Figure 12.10, lets you provide additional information to describe the application.

This section includes the following parts:

• Application title
• Description
• Insert information in every file

If desired, enter a title for the new application in this field.

If you wish, type a description for the new application in this field.

To add the information contained in the Application title and Description fields to the beginning of every application file, enable this checkbox. Disable the checkbox otherwise. The checkbox is enabled by default.

The Java Bean wizard is divided into the following steps:

1. Choose a name and location for the Java bean.

2. Specify a base class and a list of implementations.

To use the Java Bean wizard, follow these steps:

1. Choose a name and location for the Java bean.

This section of the wizard, shown in Figure 12.11, lets you specify the name and location of the new bean, as well as the modifiers for the bean.

This section includes the following parts:

• Class Name
• File
• Package
• Modifiers

Enter a name for the bean's class in this field. An example is provided below the field. The Class is a Bean checkbox below the field remains enabled. This status indicates that you are creating a Java bean.

This pop-up menu indicates that you are creating a New File. No additional options are available.

Type the path to which you want to save the file in the field above the Package field, as shown in Figure 12.11 on page 511. Alternatively, click Choose next to the field. A window opens that lets you browse your computer's contents. Use the window controls to select the location to which you want to save the file.

If you wish, you can enter in this field a package for the bean.

Use the Specifier pop-up menu to choose the method specifier for the new bean. Possible specifiers include None, Abstract, and Final. The Access pop-up menu in this section indicates that you are creating a bean with Public access. No additional options are available for this pop-up menu.

2. Specify a base class and a list of implementations.

This section of the wizard, shown in Figure 12.12, lets you specify the base class and implementations for the new bean.

This section includes the following parts:

• Base Class
• Implements List

The settings in this part determine the base-class type of the new bean. There are two possibilities:

• Visual Bean-Enable this option if the base class is a visual bean. The pop-up menu below this option lists common AWT and Swing base classes. Choose a base class from this pop-up menu.
• Non-Visual Bean/Custom-Enable this option if the base class of the event set is a non-visual bean or a custom class. Type the name of the base class in the field below this option.

In this part, type a list of interfaces to be implemented by the base class. Example interfaces are provided. Separate multiple interfaces with commas.

The IDE uses designs to organize and manage RAD projects. A design includes a particular set of user interface layouts and components that are part of the application. A CodeWarrior project can include several designs. Each design can include several build targets.

This section discusses the following topics:

• Adding Designs to a Project
• Design View in the Project Window
• Designs in the Targets View

To add a design to an open project in the IDE, choose New from the File menu. The IDE displays the New window, shown in Figure 12.13. Click the Project tab at the top of the window to display a list of available wizards.

The wizards you use to create designs are the same wizards you use to create projects:

• Java Applet Wizard-helps you create a Java applet. The wizard asks for information about the applet's class, HTML page, parameters, and description.
• Java Application Wizard-helps you create a Java application. The wizard asks for information about the application's class, frame class, and description.
• Java Bean Wizard-helps you create a Java bean. The wizard asks you for information about the bean's class, location, package, and modifiers.

To add the new design to the project, enable the Add Design to Project checkbox. Because you are adding the design to an existing project rather than creating a new project, the Location field grays out, as shown in Figure 12.13. Type a name for the new design in the Design Name field.

Select the project's name from the Project pop-up menu, as shown in Figure 12.13. The design is added to the project you choose from this pop-up menu.

After you click OK, the selected wizard opens and guides you through the design-creation process. See "RAD Wizards" on page 498 for more information about each wizard. When you complete the wizard, the IDE adds the design to the project.

Each RAD project can have multiple designs. However, a single project file can have at most 255 build targets. Because each design can have several build targets, you should keep this limit in mind as you add designs to your project. Many of the suggestions in "Strategy for Creating Complex Projects" on page 94 apply when creating multiple designs for a single RAD project.

When you create a RAD project, click the Design tab in the Project window to display the Design view. This view, shown in Figure 12.14, provides information about the design for the active build target. For example, Figure 12.14 shows the design for the Java Application build target. To view another build target's design, select that build target's name from the Current Target pop-up menu.

Some of the objects displayed in the Design view are hierarchical. Click the hierarchical control next to an object to expand that object and view its contents. Click the control again to collapse the view.

Click the Targets tab in the Project window to view the hierarchy of build targets within each design, as shown in Figure 12.15. A build target's icon includes a design badge () when it is part of the current design. For example, the JavaApp Debug build target in Figure 12.15 is part of the current design because its icon includes the design badge. Since the JavaApp Release build target is not part of the current design, its icon does not include the design badge.

Each RAD project can include multiple layouts. A layout is a collection of user interface elements that comprise an application. A specific layout describes the content of a window, dialog box, or alert. Additionally, a layout describes the content of all the possible views in a particular window when you perform various actions.

The IDE features a Layout editor that displays each layout in your project. The Layout editor uses the IDE's plug-in architecture to display the user interface. For example, when you create a Java RAD project, the IDE uses the Java RAD plug-in to display the user interface in the Layout editor. Figure 12.16 shows a sample layout.

The Layout editor works in conjunction with the catalogs to build an application. All of the available components for your RAD project are managed by catalogs. The Component Palette and the Component Catalog window let you view and use the contents of these catalogs. When you add a new interface element to the layout, you can drag a component from the Component Catalog window and drop that component into the layout. You can also select the same component from the Component Palette, which is shown in Figure 12.17.

To learn how to create layouts and use the Layout editor, see "RAD Layout Editing" on page 519.

"Component Palette" on page 528 and "Component Catalog window" on page 532 describe the two catalog tools you use with the Layout editor.

"RAD Components" on page 549 describes the individual components inside the catalogs included with CodeWarrior.